import { myRequest } from '../../utils/request';
import api from '../../utils/api'
import Cache from '../../utils/cache';
import Tool from '../../utils/tool';

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 音乐id
    musicId: {
      type: String,
      value: '',
    }
  },


  observers: {
    'musicId': function (musicId) {
      this.setData({
        ['comment.musicId']: musicId
      })
      if(musicId !== '') {
        this.getCommentList();
      }
    }
  },

  
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      this.getLoginUser();
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    }
  },


  /**
   * 组件的初始数据
   */
  data: {
    comment: {
      id: '',
      content: '',
      musicId: '',
      token: ''
    },
    removeId: '',
    commentList: [],
    loginUser: {},
    showConfirmModel: false,
    confirmText: '',
    confirmType: 0   // 1:删除评论
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 清除输入
    cleanInput() {
      this.setData({
        ['comment.content'] : ''
      });
    },
    // 验证用户是否登录
    authUser() {
      const loginUser = Cache.getCache(getApp().globalData.SESSION_KEY_LOGIN_USER);
      if(Tool.isEmpty(loginUser)) {
          wx.reLaunch({
              url: '/pages/login/login'
          })
      }
      this.setData({
          ['comment.token'] : loginUser
      })
    },
    // 表单项内容发生改变的回调
    handleInput(event) {
      let type = event.currentTarget.dataset.type;  
      this.setData({
          // type是变量，对象里面操作属性用中括号
          ['comment.' + type]: event.detail.value
      })
    },
    // 发表评论
    async submitComment() {
      this.authUser();
      const { comment } = this.data;
      comment.musicId = this.properties.musicId;
      const res = await myRequest({
        url: '/app/comment/submit',
        method: 'POST',
        data: comment
      });
      if(res.data.code === 0) {
        wx.showToast({
          title: res.data.msg,
          icon: 'success'
        })
        this.cleanInput();
        this.getCommentList();
      } else {
          wx.showToast({
              title: res.data.msg,
              icon: 'none'
          })
      }
    },
     // 获取评论数据
    async getCommentList() {
      const res = await myRequest({
        url: '/app/comment/getByMusicId',
        method: 'POST',
        data: {musicId: this.data.musicId}
      });
      if(res.data.code === 0) {
        let result = res.data.data;
        result.forEach(item => {
          item.userDTO.headPic = api.BASE_URL + '/photo/view?filename=' + item.userDTO.headPic;
        })
        this.setData({commentList: res.data.data});
      } else {
        wx.showToast({
            title: res.data.msg,
            icon: 'none'
        })
      }
    },
    // 获取当前登录用户
    async getLoginUser() {
      const loginUser = Cache.getCache(getApp().globalData.SESSION_KEY_LOGIN_USER);
      const res = await myRequest({
        url: '/app/user/getLoginUser',
        method: 'POST',
        data: {token: loginUser}
      });
      if(res.data.code === 0) {
        this.setData({loginUser: res.data.data});
      }
    },
    // 打开删除评论确认提示窗口
    openShowRemoveCommentModel(event) {
      const data = event.currentTarget.dataset;
      this.setData({showConfirmModel: true, confirmText: '确定要删除此条评论吗？', confirmType: 1, removeId: data.id});
    },
    // 关闭删除评论确认提示窗口
    cancelShowConfirmModel() {
      this.setData({showConfirmModel: false, confirmText: '', confirmType: 0});
    },
    // 确认提示确定处理
    confirmShowModel() {
        if(this.data.confirmType === 1) {
          this.removeComment();
        }
    },
    // 删除评论
    async removeComment() {
      const res = await myRequest({
        url: '/app/comment/remove',
        method: 'POST',
        data: {id: this.data.removeId}
      });
      if(res.data.code === 0) {      
        wx.showToast({
          title: res.data.msg,
          icon: 'success'
        })
        this.setData({showConfirmModel: false});
        this.getCommentList();
      } else {
        wx.showToast({
          title: res.data.msg,
          icon: 'none'
        })
      }
    }
   
  }
})
